<template>
  <div id='expand-index1'>
    <!-- <area-select></area-select> -->
    <loading mode="full" v-if="loading"></loading>
    <h1 class="card-title">
           <span>拓展经理</span>
           <div class="card-title__button" @click='addManager()'>添加拓展经理</div>
    </h1>
    <div class="order-form form-table">
                 <div class="form-item">
                         <div class="form-item__key">排序规则</div>
                         <div class="form-item__value">
                             <select v-model="sort" class="sort">
                                 <option value="">全部</option>
                                 <option value="1">创建时间从晚到早</option>
                                 <option value="2">最近登录时间从晚到早</option>
                             </select>
                        </div>
                 </div>
                 <div  class="form-button" @click='findAll(1)'><span class="form-button__item button">搜索</span></div>       
    </div>
    <el-table
                            ref="multipleTable"
                            :data="tableData3"
                            border
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <!-- <el-table-column
                            type="selection"
                            >
                            </el-table-column> -->
                            <el-table-column
                            prop="name"
                            label="姓名"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.name'> {{ scope.row.name }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="phone"
                            label="登录账号"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.phone'> {{ scope.row.phone }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="role"
                            label="角色"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.role'> {{ transformId(scope.row.role) }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="createTime"
                            label="创建时间"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.createTime'> {{ timestampToDate(scope.row.createTime) }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="loginTime"
                            label="最近登录时间"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.loginTime'> {{ timestampToDate(scope.row.loginTime) }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button
                                        size="small"
                                        type="text"
                                        @click='editPick(scope.$index, scope.row)'
                                        >修改</el-button>
                                      
                                    </template>
                            </el-table-column>            
            </el-table>
             <pagination
                      :current-page='records.pageNum'
                      :total-page='records.totalPage'
                      @pageChange='findAll'>
            </pagination> 
             <modal
            title="添加拓展经理"
            :show='allot3'
            @close='allot3=false'
            cancle-text='取消'
            confirm-text='确定'
            @confirm='addExpansionManager'
            reset-text=''
            >
              <h1 style='text-align:center;border:1px solid #ddd;background-color:#ddd;'>
                  <span style="font-size:15px;font-weight:normal;line-height:32px;color:black;">拓展经理详情</span>
              </h1>
               <ul>
                <li class="result-info__item">
                    <div class="result-info__value">
                        <div class="form-item">
                          <div class="form-item__key">姓名</div>
                             <div class="form-item__value">
                                 <input type="text" placeholder="请输入姓名" v-model="one">
                             </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="result-info__value">
                        <div class="form-item">
                          <div class="form-item__key">手机</div>
                             <div class="form-item__value">
                                 <input type="tel" placeholder="请输入手机号码" v-model="two">
                             </div>
                        </div>
                    </div>
                </li>
                 <li>
                    <div class="result-info__value">
                        <div class="form-item">
                          <div class="form-item__key">密码</div>
                             <div class="form-item__value">
                                 <input type="password" placeholder="请输入密码" v-model="three">
                             </div>
                        </div>
                    </div>
                </li>
              </ul>
            </modal>

             <modal
            title="修改拓展经理详情"
            :show='allot2'
            @close='allot2=false'
            cancle-text='取消'
            confirm-text='确定'
            @confirm='save'
            reset-text=''
            >
              <h1 style='text-align:center;border:1px solid #ddd;background-color:#ddd;'>
                <span style="font-size:15px;font-weight:normal;line-height:32px;color:black;">修改信息</span>
              </h1>
              <ul>
                <li class="result-info__item">
                    <div class="result-info__value">
                        <div class="form-item">
                          <div class="form-item__key">姓名</div>
                             <div class="form-item__value">
                                 <input type="text" placeholder="请输入姓名" v-model='nameIn'>
                             </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="result-info__value">
                        <div class="form-item">
                          <div class="form-item__key">手机</div>
                             <div class="form-item__value">
                                 <input type="tel" placeholder="请输入手机号码" v-model='phoneIn'>
                             </div>
                        </div>
                    </div>
                </li>
                 <li>
                    <div class="result-info__value">
                        <div class="form-item">
                          <div class="form-item__key">密码</div>
                             <div class="form-item__value">
                                 <input type="password" placeholder="请输入密码" v-model='passwords'>
                             </div>
                        </div>
                    </div>
                </li>
              </ul>
          </modal>
  </div>
</template>

<script>
  import {Promise} from 'es6-promise'
  import footerBar from '../components/FooterBar.vue'
  import selectGroup from '../components/SelectGroup.vue'
  import selectOption from '../components/SelectOption.vue'
  import radioGroup from '../components/RadioGroup.vue'
  import datePicker from '../components/DatePicker.vue'
  import areaSelect from '../components/AreaSelect.vue'
  import radio from '../components/Radio.vue'
  import loading from '../components/Loading.vue'
  import tabBox from '../components/TabBox.vue'
  import tab from '../components/Tab.vue'
  import checkBox from '../components/CheckBox.vue'
  import checkBoxGroup from '../components/CheckBoxGroup.vue'
  import toolTip from '../components/ToolTip.vue'
  import modal from '../components/Modal.vue'
  import confirm from '../components/Confirm.vue'
  import buttonLoading from '../components/ButtonLoading.vue'
  import pagination from '../components/Pagination.vue'
  import dateFormat from '../filters/filter-dateFormat'
  import toYuan from '../filters/filter-toYuan'
  import  {mapGetters, mapActions}  from 'vuex'
  import {addLenderValidation, resetAccountPasswordValidation, operatorEditValidation} from '../validation/validation'
  import {allApi, lenderApi} from '../api/api'
  import moment from 'moment'
  // import AreaSelect from '../components/AreaSelect.vue'


  export default {
    components: {
      footerBar,
      selectGroup,
      selectOption,
      radioGroup,
      tabBox,
      tab,
      radio,
      checkBox,
      checkBoxGroup,
      areaSelect,
      loading,
      toolTip,
      modal,
      confirm,
      buttonLoading,
      pagination,
      datePicker,
      // AreaSelect
    },
    filters: {
      dateFormat,
      toYuan,
      booleanToStr(boolean){
        if (boolean === true) {
          return '是'
        }
        else {
          return '否'
        }
      }
    },
    data() {
      return {
         loading:true,
         sort:'',
         tableData3:[],
         records:[],
         allot2:false,
         allot3:false,
         one:'',
         two:'',
         three:'',
         nameIn:'',
         phoneIn:'',
         idIn:'',
         passwords:'',

      }
    },
    computed: {
      ...mapGetters([
        'msgTip',
        'localInfo'
      ]),
    },
    methods: {
      // actions
      ...mapActions([
        'showLoading',
        'hideLoading',
        'setMsgTip'
      ]),
      transformId(item){
          if(item=='ADMIN') return '管理员'
          return '拓展经理'
      },
      // filters
     timestampToDate(timestamp){
        if (!timestamp) return this.placeholder
        return moment(timestamp).format('YYYY-MM-DD HH:mm:ss')
          },
      insure(kai){
          if(kai==true) return '是'
          return '否'
      },
      handleSelectionChange(val) {
          this.multipleSelection = val;
      },
      findAll(num){
              this.loading = true
                allApi.findAll({
                  rank:this.sort,
                  pageNum:num,
                  pageSize:10
                })
                .then(result => {
                    // console.log(result)
                  this.records=result.list[0]
                  this.tableData3=result.list[0].list
                    console.log('111')
                     this.loading= false
                })
                .catch(error => {
                  this.loading = false
                    console.error(error)
                })
            },
      // findAllCreateTimeDesc(){
      //   console.log('www')
      // }
      addManager(){
              this.allot3=true
      },
      addExpansionManager(){
                allApi.addExpansionManager(
                      {
                         name:this.one,
                         phone:this.two,
                         password:this.three
                      }
                    )
                      .then(result => {
                        // console.log(result)
                          console.log('111')
                            this.setMsgTip({
                            text: '添加成功',
                            type: 'success'
                        })
                        this.findAll(this.records.pageNum)
                        this.allot3=false
                        
                      })
                      .catch(error => {
                          console.error(error)
                      })
      },
      editPick(index,item){
        // console.log(item,index)
        this.nameIn=item.name
        this.phoneIn=item.phone
        this.idIn=item.id
        this.allot2=true
      },
      save(){
            allApi.save(
              {
                id:this.idIn,
                name:this.nameIn,
                phone:this.phoneIn,
                password:this.passwords
              }
            )
                .then(result => {
                  // console.log(result)
                  // this.records=result
                    this.setMsgTip({
                        text: '修改成功',
                        type: 'success'
                    })
                    this.findAll(this.records.pageNum)
                    this.allot2=false
                })
                .catch(error => {
                    console.error(error)
                })
            },
 
 
          
      
    },
    created(){
      this.findAll(1)
    }
  }
</script>

<style lang="scss">
  @import "../sass/variables";
  @import "../sass/extends";
  @import "../sass/mixins";

  #expand-index1 {
      width:95%;
    .el-button--text {
            color: #13ce66;
        }
  }
</style>
